<template>
	<view>
		<u-navbar :is-back="true" title="">
			<view class="slot-wrap">
				<u-search placeholder="请输入商品名称" focus v-model="params.keywords" @search="postSearchMallGoods" @custom="postSearchMallGoods"></u-search>
			</view>
		</u-navbar>
		<template v-if="goodsList.length">
			<!-- 商品列表 -->
			<view class="j-i-goods-list">
				<view class="j-i-goods-item" @click="toGoodsDetails(item)" v-for="(item, index) in goodsList" :key="index"><goods :goods="item"></goods></view>
			</view>
		</template>
		<template v-else>
			<view class="j-a-empty"><u-empty mode="search"></u-empty></view>
		</template>
	</view>
</template>

<script>
export default {
	data() {
		return {
			params: {
				page: '1',
				rows: '100',
				keywords: ''
			},
			goodsList: []
		};
	},
	methods: {
		postSearchMallGoods(val) {
			this.params.keywords = val;
			this.$u.api
				.postSearchMallGoods(this.params)
				.then(res => {
					console.log(res, '[商品搜索页-根据搜索关键词查询商品]');

					if (res.data.rows.length) {
						res.data.rows.forEach(v => {
							v.imageFirst = JSON.parse(v.goodsImages)[0];
						});
					}

					this.goodsList = res.data.rows;
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 跳转商品详情页面
		toGoodsDetails(item) {
			uni.navigateTo({
				url: '../goods/goods-details?goodsMallId=' + item.goodsMallId
			});
		}
	}
};
</script>

<style>
page {
	background-color: #f3f3f3;
}
</style>
<style scoped lang="scss">
.j-a-empty {
	margin-top: 60rpx;
}
.slot-wrap {
	display: flex;
	align-items: center;
	flex: 1;
	padding-right: 30rpx;
}
.j-i-goods-list {
	display: flex;
	flex-wrap: wrap;
	padding: 0 25rpx;
	margin-top: 25rpx;
	justify-content: space-between;

	.j-i-goods-item {
		margin-bottom: 25rpx;
	}
}
</style>
